<script lang="ts" setup>
// import { ref, onMounted, nextTick, reactive, toRefs } from "vue"
import { ref, watch, computed } from "vue"
import { useRouter } from "vue-router"
import "@/utils/rem"
import { formatDateTime } from "@/utils"
import { getMsg } from "@/api/advice"
const router = useRouter()
const loading = ref(false)
const isLoading = ref(false)
const finished = ref(false)
const tid = ref<any>(router.currentRoute.value.query.id) //标识ID
const pageNo = ref<number>(1)
const pageSize = ref<number>(10)
const counts = ref<any>(0)
const list = ref<any>([])
const getList = async () => {
  await getMsg({
    page: pageNo.value,
    size: pageSize.value,
    ident: tid.value
  })
    .then((res: any) => {
      const arr = res.data.list
      list.value = list.value.concat(arr)
      counts.value = res.data.total
      loading.value = false
      const num = list.value.length - counts.value
      if (num >= 0) {
        finished.value = true
      }
    })
    .catch(() => {
      list.value = []
    })
}
const onRefresh = async () => {
  list.value = []
  pageNo.value = 1
  isLoading.value = false
  await getList()
  // 清空列表数据
  finished.value = false
}
const onLoad = () => {
  setTimeout(() => {
    if (isLoading.value) {
      list.value = []
      isLoading.value = false
    }
    // 数据全部加载完成
    pageNo.value++
    getList()
  })
}
watch(
  [() => router.currentRoute.value.query],
  (newValue) => {
    tid.value = newValue[0].id
    getList()
  },
  {
    immediate: true
  }
)
</script>

<template>
  <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
    <div class="bg" ref="bgRef">
      <div class="list" v-if="list.length">
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          :offset="80"
          :immediate-check="false"
          @load="onLoad"
        >
          <van-cell v-for="item in list" :key="item.id" style="margin-bottom: 0.2rem">
            <h3><b>标题：</b>{{ item.title }}</h3>
            <p>
              <span><b>类型：</b>{{ item.types }}</span>
              <span style="float: right"><b>时间：</b>{{ formatDateTime(item.createTime) }}</span>
            </p>
            <p><b>内容：</b>{{ item.contents }}</p>
            <p><b>相关回复：</b>{{ item.backContents || "暂无" }}</p>
          </van-cell>
        </van-list>
      </div>
      <van-button type="success" round class="orderSearch" size="mini" to="/advice"> 继续反馈 </van-button>
    </div>
  </van-pull-refresh>
</template>

<style lang="scss" scoped>
.bg {
  width: 7.5rem;
  height: 100vh;
  margin: 0 auto;
  overflow: hidden;
  overflow-y: scroll;
  background-image: url("http://fansitexitong.cn/images/advicebg.jpg");
  background-size: 100% 100%;
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.orderSearch {
  position: fixed;
  padding: 0.24rem 0.3rem;
  // padding-right: 0.2rem;
  top: 1rem;
  right: -0.2rem;
  background-color: rgba(255, 255, 255, 0.8);
  color: #000;
  border: 0;
  font-size: 14px;
  font-weight: 700;
}
.list {
  padding: 0.2rem;
  padding-top: 2rem;
  // margin: 0.2rem 0;
}
:deep(.van-list__finished-text) {
  color: #fff !important;
}
:deep(.van-cell__value) {
  text-align: left !important;
}
h3,
p {
  color: #000;
  margin: 0;
}
p {
  color: #666;
}
b {
  color: #444;
  font-weight: 600;
}
</style>
